<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2023/4/25
  Time: 9:55
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <%-- 引入css和js--%>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/layui-v2.7.6/layui/css/layui.css" >
    <script src="${pageContext.request.contextPath}/static/layui-v2.7.6/layui/layui.js"></script>

</head>
<body>


<div id="test12" class="demo-tree-more" style="display: none"></div>


<table class="layui-hide" id="test" lay-filter="test"></table>

<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-xs" lay-event="edit">分配权限</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>
<script>
    /* dept。jsp 的时候  */
    layui.use(['table','tree', 'util','jquery'], function(){
        var table = layui.table;
        var tree = layui.tree
            ,$=layui.jquery
            ,layer = layui.layer
            ,util = layui.util;
       // var treeData=[{mid:1, mname:系统设置, pid:0, url:"", icon:layui-icon-group, sonMenus:[{}]} ]
        var Treedata=[];
        // 向后台发出请求  获取对应的数据  Treedata
        $.get("${pageContext.request.contextPath}/TabManuServlet?method=getTreeData",{},function(res){
            //
            if(res.code==0){

                console.log(res.data);
                // 获取数据
                Treedata= res.data;
            }

        })




        // 渲染table表格
        table.render({
            elem: '#test'
            // 数据的格式 data   LayData
            ,url:'${pageContext.request.contextPath}/TabRoleServlet?method=query'
            ,page:true
            ,cols: [[
                {field:'rid', title: 'ID', sort: true}
                ,{field:'rname', title: 'juese名字'}
                ,{fixed: 'right', title:'操作',  toolbar: '#barDemo'}

            ]]
        });



        //触发单元格工具事件
        table.on('tool(test)', function(obj){ // 双击 toolDouble
            var data = obj.data;// 当前这一行的数据
            var rid = data.rid;
            //console.log(obj)
            if(obj.event === 'del'){
                layer.confirm('真的删除行么', function(index){
                    obj.del();
                    layer.close(index);
                });
            } else if(obj.event === 'edit'){
                $("#test12").css("display","block");
                // 渲染数据
                tree.render({
                    elem: '#test12'
                    ,data: Treedata
                    ,showCheckbox: true  //是否显示复选框
                    ,id: 'demoId1'
                    ,isJump: true //是否允许点击节点时弹出新窗口跳转
                    ,click: function(obj){
                        var data = obj.data;  //获取当前点击的节点数据
                        layer.msg('状态：'+ obj.state + '<br>节点数据：' + JSON.stringify(data));
                    }
                });

                layer.open({
                    title: '编辑',
                    type: 1,
                    area: ['500px','500px'],
                    offset: '50px',
                    content: $("#test12")
                    ,btn: ['提交']
                    ,yes: function(index, layero){

                        let checkedMids=[];
                        // 当前的角色 修改一下对应的角色的拥有的菜单的id
                        // 角色的id

                        // 获取选中的菜单的id 即可
                        var checkData = tree.getChecked('demoId1');
                        checkData.forEach(function (item) {
                            // 放的一级菜单的id
                            checkedMids.push(item.id);
                            // 二级菜单的id 存放到checkedMids
                            item.children.forEach(function(item2){
                                //
                                checkedMids.push(item2.id);
                            })
                        })
                      // 数组转化为字符串
                       let chekids= checkedMids.join(",");
                        //
                        $.post("${pageContext.request.contextPath}/TabRoleMenuServlet?method=upd",{"rid":rid,"mids":chekids});
                        // 弹框关闭
                        // $("#test12").css("display","none");
                        // alert($("#test12").css("display"));
                        // layer.closeAll();
                        // //
                        // $("#test12").css("display","none");
                        layer.close(index);
                        $('#test12').hide();
                        return false;

                    }
                    ,cancel: function(){
                        //右上角关闭回调

                        //return false 开启该代码可禁止点击该按钮关闭
                    }
                });

                let checkIds=[];
                // 当前的角色所拥有的菜单 选中   子菜单
               $.ajax({
                   url:"${pageContext.request.contextPath}/TabRoleMenuServlet?method=queryByRid",
                   async:false,
                   data:{"rid":rid},
                   success:function(res){
                       if(res.code==0){
                           checkIds=res.data;
                       }

                   }
               })
                alert(checkIds);

                // 根据角色的id 查询一下 mid  子菜单的id
                //
                tree.setChecked('demoId1', checkIds); //勾选指定节点

            }
        });
    });
</script>

</body>
</html>
